<!DOCTYPE html>
<html lang="en">
<head>
    <title>管理系统 - 管理中心</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- CSS Libs -->
    <link rel="stylesheet" type="text/css" href="../lib/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/animate.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/bootstrap-switch.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/checkbox3.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/jquery.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/dataTables.bootstrap.css">
    <link rel="stylesheet" type="text/css" href="../lib/css/select2.min.css">
    <link href="../lib/css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">	
    <!-- CSS App -->
    <link rel="stylesheet" type="text/css" href="../css/style.css">
    <link rel="stylesheet" type="text/css" href="../css/themes/flat-blue.css">
	<style type="text/css">
    .table>tbody>tr>td{height:38px; line-height: 38px}
        .f{ float: left; width:40px; }
        .listInput{ width:150px }
        .bt{ margin-left:15px }
        .pointer{ cursor: pointer }
        .sort{ color:#5bc0de}
        .info{ color:#1b6d85 }
        .danger{ color:#ff0000 }
        .primary{ color:#3c763d }
        .rowEnable{ background-color: #fff }
        .rowDisabled{ background-color: #F7F7F7 }
        .mr{ margin-right: 10px}
        .ml{ margin-left: 10px}
        input[type="text"]{ height:30px; }
        input[type="radio"]{ margin-left:6px }
        select{ height:25px;  }
        #myModalLabel{ height:35px;}
        #editForm{overflow-x:hidden;overflow-y:auto; max-height:500px}
        .W10{width: 10%}
        .W13{width: 13%}
        .W17{width: 17%}
        ul>li>a{ cursor: pointer;}
    </style>
</head>

<body class="flat-blue">
    <div class="app-container">
        <div class="row content-container">
            <nav class="navbar navbar-default navbar-fixed-top navbar-top">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <button type="button" class="navbar-expand-toggle">
                            <i class="fa fa-bars icon"></i>
                        </button>
                        <ol class="breadcrumb navbar-breadcrumb">
                            <li class="active" style="font-family:仿宋">管理系统</li>
                        </ol>
                        <button type="button" class="navbar-right-expand-toggle pull-right visible-xs">
                            <i class="fa fa-th icon"></i>
                        </button>
                    </div>
                    <ul class="nav navbar-nav navbar-right">
                        <button type="button" class="navbar-right-expand-toggle pull-right visible-xs">
                            <i class="fa fa-times icon"></i>
                        </button>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-comments-o"></i></a>
                            <ul class="dropdown-menu animated fadeInDown">
                                <li class="title">
                                    Notification <span class="badge pull-right">0</span>
                                </li>
                                <li class="message">
                                    No new notification
                                </li>
                            </ul>
                        </li>
                        <li class="dropdown danger">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-star-half-o"></i> 4</a>
                            <ul class="dropdown-menu danger  animated fadeInDown">
                                <li class="title">
                                    Notification <span class="badge pull-right">4</span>
                                </li>
                                <li>
                                    <ul class="list-group notifications">
                                        <a href="#">
                                            <li class="list-group-item">
                                                <span class="badge">1</span> <i class="fa fa-exclamation-circle icon"></i> new registration
                                            </li>
                                        </a>
                                        <a href="#">
                                            <li class="list-group-item message">
                                                view all
                                            </li>
                                        </a>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li class="dropdown profile">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Lucy <span class="caret"></span></a>
                            <ul class="dropdown-menu animated fadeInDown">
                                <li class="profile-img">
                                    <img src="../img/profile/picjumbo.com_HNCK4153_resize.jpg" class="profile-img">
                                </li>
                                <li>
                                    <div class="profile-info">
                                        <h4 class="username">Emily Hart</h4>
                                        <p>emily_hart@email.com</p>
                                        <div class="btn-group margin-bottom-2x" role="group">
                                            <button type="button" class="btn btn-default"><i class="fa fa-user"></i> 权限</button>
                                            <button type="button" class="btn btn-default"><i class="fa fa-sign-out"></i> 推出</button>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </nav>
            <div class="side-menu sidebar-inverse">
                <nav class="navbar navbar-default" role="navigation">
                    <div class="side-menu-container">
                        <div class="navbar-header">
                            <a class="navbar-brand" href="#">
                                <div class="icon fa fa-cloud"></div>
                                <div class="title">Cloud Platform</div>
                            </a>
                            <button type="button" class="navbar-expand-toggle pull-right visible-xs">
                                <i class="fa fa-times icon"></i>
                            </button>
                        </div>
                        <ul class="nav navbar-nav">
                            <li class="">
                                <a href="index.html">
                                    <span class="icon fa fa-desktop"></span><span class="title">控制台</span>
                                </a>
                            </li>
                            <li class="panel panel-default dropdown">
                                <a data-toggle="collapse" href="#dropdown-element">
                                    <span class="icon fa fa-wrench"></span><span class="title">表单管理</span>
                                </a>
                                <!-- Dropdown level 1 -->
                                <div id="dropdown-element" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <ul class="nav navbar-nav">
                                            <li><a href="formConfig.html">表单设置</a>
                                            </li>
                                            <li><a href="#">其它设置</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </li>
                            <li class="panel panel-default dropdown">
                                <a data-toggle="collapse" href="#dropdown-data">
                                    <span class="icon fa fa-database"></span><span class="title">数据管理</span>
                                </a>
                                <!-- Dropdown level 1 -->
                                <div id="dropdown-data" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <ul class="nav navbar-nav">
                                            <li><a href="formDevice.html">数据录入</a>
                                            </li>
                                            <li><a href="showDevice.html">数据管理</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </li>
                            <!-- Dropdown-->
                            <li class="panel panel-default dropdown">
                                <a data-toggle="collapse" href="#dropdown-chart">
                                    <span class="icon fa fa-area-chart"></span><span class="title">数据分析</span>
                                </a>
                                <!-- Dropdown level 1 -->
                                <div id="dropdown-chart" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <ul class="nav navbar-nav">
                                            <li><a href="chartMap.html">地理分布</a>
                                            </li>
                                            <li><a href="companyList.html">公司信息</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </li>
                            <li class="panel panel-default dropdown">
                                <a data-toggle="collapse" href="#dropdown-user">
                                    <span class="icon fa fa-user"></span><span class="title">用户管理</span>
                                </a>
                                <!-- Dropdown level 1 -->
                                <div id="dropdown-user" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <ul class="nav navbar-nav">
                                            <li><a href="pages/login.html">用户列表</a>
                                            </li>
                                            <li><a href="pages/index.html">权限管理</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <!-- /.navbar-collapse -->
                </nav>
            </div>
            <div class="copyrights">Collect from <a href="http://www.a.com/" >免费网站模板</a></div>
            <!-- Main Content -->
            <div class="container-fluid" ng-app="myApp" ng-controller="myCtrl" >
                <div class="side-body padding-top" style="background-color:#fff; bottom: 0px; position:absolute; top:10px; left:10px; right:10px; height:100%">
                    
                        <!------------------------------------------------------------------>
						<div style="width:90%; margin:15px; margin-top:0px">
							<table class="table" style="background-color:#fff" data-show-toggle="false" data-expand-first="true">
        <thead>
            <tr>
                <th ng-repeat="col in cols" ng-class="colClass[col.field]">{{col.name}}</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
		
            <tr ng-repeat="row in rows">
                <td ng-repeat="col in cols">{{row[col.field]}}</td>
                <td>
                    <button ng-click="editRow($index)" class="bt btn btn-info btn-xs" data-toggle="modal" data-target="#myModal1">
                        <span class="glyphicon glyphicon-edit"></span> 编辑
                    </button>
                </td>
            </tr>
        </tbody>
        </table>
		<div style="margin-bottom:45px" align="center">
			<ul class="pagination">
				<li><a ng-click="Page.pagePre()">&laquo;</a></li>
				<li ng-repeat="pIndex in Page.pagePool" 
                    ng-class="{active: Page.pageIndex==pIndex}">
                    <a ng-click="loadDevice(pIndex)">{{pIndex + 1}}</a>
                </li>
				<li><a ng-click="Page.pageNext()">&raquo;</a></li>
			</ul>
		</div>

		<!-- 模态框 For Edit Row -->
    <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header" style="height:40px">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <p style="font-size:14px" class="modal-title" id="myModalLabel">编辑</p>
                </div>
                <!--核心内容-->
                <div class="modal-body" style="min-height: 250px; ">
                    <div compile="formTpl" id="editForm" style="" ></div>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    <!-- End 模态框 For Edit List -->

    


    </div>
<!---------------------------------------------------------------------------->
						
						
                    </div>
					<div class="row  no-margin-bottom">
					</div>
                </div>
            </div>
        </div>
        <footer class="app-footer" style="position: fixed;opacity:1;background-color: #fff;">
            <div class="wrapper">
                <span class="pull-right">2.1 <a href="#"><i class="fa fa-long-arrow-up"></i></a></span> © 2015 Copyright. More Templates <a href="http://www.cssmoban.com/" target="_blank" title="">**科技有限公司</a> - Collect from <a href="#" title="管理系统" target="_blank">管理系统</a>
            </div>
        </footer>
        <div>
            <!-- Javascript Libs -->
            <script type="text/javascript" src="../lib/js/jquery.min.js"></script>
            <script type="text/javascript" src="../lib/js/bootstrap.min.js"></script>
            <script type="text/javascript" src="../lib/js/bootstrap-switch.min.js"></script>
            <script type="text/javascript" src="../lib/js/jquery.matchHeight-min.js"></script>
            <script type="text/javascript" src="../lib/js/jquery.dataTables.min.js"></script>
            <script type="text/javascript" src="../lib/js/dataTables.bootstrap.min.js"></script>
            <script type="text/javascript" src="../lib/js/select2.full.min.js"></script>
            <script src="../lib/js/bootstrap-datetimepicker.min.js"></script>
			<script src="../lib/js/bootstrap-datetimepicker.zh-CN.js"></script>
			

            <!-- Javascript -->
            <script type="text/javascript" src="../js/app.js"></script>
            <script type="text/javascript" src="../js/index.js"></script>
			<script type="text/javascript" src="../lib/js/angular.min.js"></script>
			<script type="text/javascript" src="../js/public.js"></script>
			<script type="text/javascript" src="../js/chinaZone.js"></script>
			<script type="text/javascript" src="../js/editDevice.js"></script>
<script language="javascript">
    function cout(obj){ console.log(obj); }

    var app = angular.module('myApp', []);
    app.directive('compile', function ($compile) {
        return function (scope, element, attrs) {
            scope.$watch(
              function (scope) { return scope.$eval(attrs.compile); },
              function (value) {
                  element.html(value);
                  $compile(element.contents())(scope);
              }
            );
        };
    }); 
    function Page(){
            var P = this;
            P = {
                pageSize : 0,
                pageCount : 0,
                pageIndex : 0,
                pageNumber : 5, //分页条目数
                pageBegin : 0, //分页条起始
                pageEnd : 1,  //分页条终止
                pagePool : [],
            };
            P.pagePre = function(){
                var pre = P.pageBegin - P.pageNumber;
                if(pre<0)return;
                P.pageEnd = P.pageBegin - 1;
                P.pageBegin = pre;
                P.loadPages();
            };
            P.pageNext = function(){
                var next = P.pageEnd + P.pageNumber;
                if(P.pageEnd==P.pageCount)return;
                P.pageBegin = P.pageEnd + 1;
                P.pageEnd = (next > P.pageCount) ? P.pageCount : next ;
                P.loadPages();
            };
            P.loadPages = function (){
                P.pagePool = [];
                for(var i=P.pageBegin; i<=P.pageEnd; i++)P.pagePool.push(i);
            };
            P.init = function(){
                var next = P.pageNumber - 1;
                P.pageEnd = (next > P.pageCount) ? P.pageCount : next ;
                P.loadPages();
            }
            return P;   
        }

    app.controller('myCtrl', function($scope) {
        //// 模态编辑窗口
        $scope.formTpl = getEditDeviceTpl.txtContent();
        $scope.hideCols = {"id":1, "user":1, "updateTime":1};
        //// 单条数据
        $scope.line = {"type":"工业", "productionStatus":"未投产"};
        //// 地址信息·支持多字段
        $scope.Addrs = {};
        $scope.cols = [];
        $scope.rows = [];
        //// 待编辑的项
        $scope.line = {};   
        $scope.colClass = {};
        
        $scope.Page = new Page();
        $scope.Page.init();      

        ajaxData("get_form", {"user":'David'}, function(rst){
            var items = rst.data.rows; 
            $scope.selOptions = rst.data.options;
            items.forEach(function(d){
                d['editFlag'] = [1,1];
                $scope.colClass[d.field] = "";
                if(d.type=="address"){
                    if(d.field=="address"){
                        $scope.cols.push({"field":"province", "name":"省"});
                        $scope.cols.push({"field":"city", "name":"市"});
                        $scope.cols.push({"field":"county", "name":"县级"});
                    }
                    //// 地址联动组件，selProvince， selCity， selCounty为选择或设置的值
                    $scope.Addrs[d.field] = {"selProvince":"", "selCity":"", "selCounty":""};
                }
                if(!(d.field in $scope.hideCols))$scope.cols.push(d);
            });
            //// 加载地址控件
            loadAddrs($scope, $scope.Addrs);
            $scope.loadDevice();
            $scope.colClass["address"] = "W10";
            $scope.colClass["mark"] = "W10";
            $scope.$apply();
        });

        $scope.loadDevice = function (page){
            if(!page) page = 0; 
            $scope.Page.pageIndex = page;
            $scope.rows = [];
            ajaxData("get_devices", {"user":'David', 'page':page}, function(rst){ 
                var dt = rst.data.rows;
                $scope.Page.pageSize = rst.data.pageSize;
                $scope.Page.pageCount = rst.data.pageCount;
                $scope.Page.init();
                dt.forEach(function(item){
                    $scope.rows.push(collectRow($scope, item));    
                });
            
                //cout($scope.rows);
                //cout($scope.line)
                $scope.$apply();
                return;
            });    
        }
        //// 编辑条目，将加载模态框
        $scope.editRow = function(index){
            var row = $scope.rows[index];
            $scope.line = {'rIndex':index};
            for(var key in row) $scope.line[key] = row[key];
        } 

        $scope.Submit = function(){
            SubmitRow($scope, $scope.line, function(dt){
                for(var key in $scope.line){
                    var i = $scope.line['rIndex'];
                    if(key!=="$$hashKey")$scope.rows[i][key] = $scope.line[key];
                }
                $("#myModal1").modal('hide');
                $scope.$apply();
            });
        };


    });



    app.directive('onFinishRenderFilters', function ($timeout) {
        return {
            restrict: 'A',
            link: function ($scope, element, attr) {
                if ($scope.$last !== true)return;
                $timeout(function () {
                    $('.date').datetimepicker({
                        format: 'yyyy-mm-dd', language:'zh-CN', autoclose:true, minView:"month"
                    });
                 });
            }
        }
    });

    $(document).ready(function(){
        $('.date').datetimepicker({
            format: 'yyyy-mm-dd', language:'zh-CN', autoclose:true, minView:"month"
        });
    });


	</script>
			
			
</body>

</html>
